<template>
	<view class="container">
		<view v-if="activityList.length > 0">
			<view v-for="(item,i) in activityList" :key="i" class="news_box" @click="navTo(item)">
				<view style="width:calc(100% - 280upx);">
					<view class="activity_title">
						{{item.activity.activityName}}
					</view>
					<view class="activity_address">
						<view>咨询电话：</view>
						<view>{{item.activity.activityPhoneNum}}</view>
					</view>
					<view class="activity_address">
						<view>我的报名：</view>
						<view v-if="item.t.isCheck == 0">审核中</view>
						<view v-else-if="item.t.isCheck == 1">已通过</view>
						<view v-else-if="item.t.isCheck == 2">未通过</view>
					</view>
					<view class="activity_count">
						<view>报名时间：</view>
						<view>{{item.t.createDate}}</view>
					</view>
				</view>
				<view style="height:180upx;width:280upx">
					<view style="height:180upx;background-color: #F4F4F4;width:260upx">
						<image :src="item.activity.activityPropagatePic || noPhoto" style="width:100%;height: 100%;" />
					</view>
				</view>
			</view>
		</view>
		<empty v-else></empty>
		<uni-load-more :status="loadingType"></uni-load-more>
	</view>
</template>

<script>
	import empty from '@/components/empty.vue'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	export default {
		data() {
			return {
				activityList: [],
				page: 1,
				total: 0,
				pageSize: 5,
				loadingType: "more",
				noPhoto: "https://cdjjyl.com.cn/images/noPhoto.png",
				userInfo:uni.getStorageSync("userInfo")
			}
		},
		onLoad() {
			this.queryActivities(this.page)
		},
		components: {
			uniLoadMore,
			empty
		},
		onReachBottom: function() {
			if (this.loadingType === 'more') {
				this.page = this.page + 1;
				this.queryActivities(this.page)
			}
		},
		methods: {
			navTo(item) {
				uni.navigateTo({
					url: "/package_isp/pages/conscription/result?id=" + item.activity.activityUuid +"&myInfo="+ encodeURIComponent(JSON.stringify(item.t))
				})
			},
			queryActivities: function(page) {
				let that = this;
				this.$api.request.queryEnroll({
					"wxCode": this.userInfo.userUuid,
					"page":page,
					"pageSize":this.pageSize
				}, function(res) {
					console.log(res.body.data.lists)
					if (res.body.status.statusCode === '0') {
						that.activityList = that.activityList.concat(res.body.data.lists);
						that.total = res.body.data.total;
						console.log(that.activityList.length)
						if (that.activityList.length >= res.body.data.total) {
							that.loadingType = 'noMore'
						}
					}
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #FBFBFB;
	}

	.container {
		width: 100%;
		padding: 0 20upx;
		height: 100vh;
		background-color: #FBFBFB;
	}

	.activity_title {
		margin-left: 12upx;
		font-weight: bold;
		font-size: 28upx;
		height: 40upx;
		line-height: 40upx;
		width: calc(100% - 24upx);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-bottom: 20upx;
	}

	.activity_count {
		margin-left: 12upx;
		height: 30upx;
		color: #929292;
		line-height: 30upx;
		font-size: 22upx;
		display: flex;
		flex-direction: row;
		justify-content: left;
	}

	.news_box {
		margin-top: 20upx;
		display: flex;
		flex-direction: row;
		padding: 20upx;
		border-radius: 10upx;
		background-color: white;
	}

	.activity_address {
		margin: 20upx 12upx;
		width: calc(100% - 24upx);
		font-size: 24upx;
		display: flex;
		flex-direction: row;
	}
</style>
